<!doctype html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>敏感词管理</title>
    <link rel="stylesheet" href="./css/M.css">
</head>

<body>
    <h1>敏感词管理</h1>
    <div class="input-container">
        <form onsubmit="return validForm(this)">
            <input name="sensitiveWord" type="text" id="sensitiveWordInput" placeholder="请输入敏感词" required>
            <select name="level" id="sensitiveWordLevel" required>
                <option value="1">保密</option>
                <option value="2">秘密</option>
                <option value="3">绝密</option>
            </select>
            <button type="submit" class="add-rule-btn">添加敏感词</button>
        </form>
    </div>

    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>敏感词</th>
                <th>保密级别</th>
                <th>功能列表</th>
            </tr>
        </thead>
        <tbody id="tbody"></tbody>
    </table>

    <div class="pagination">
        <button onclick="prevPage()">上一页</button>
        <button onclick="nextPage()">下一页</button>
    </div>

    <script>
        let currentPage = 1; // Track the current page
        const pageSize = 10; // Set number of items per page

        window.onload = function () {
            loaddata();
        }

        function loaddata() {
            fetch(`/cgi-bin/sensitive?limit=${pageSize}&offset=${(currentPage - 1) * pageSize}`)
                .then(resp => resp.json())
                .then(data => {
                    console.log(data);
                    const tbody = document.getElementById("tbody");
                    tbody.innerHTML = "";  
                    if (data.code == 0) {
                        data.datas.forEach(item => {
                            let tr = document.createElement("tr");
                            tr.innerHTML = `
                                <td>${item.id}</td>
                                <td>${item.word}</td>
                                <td class="${levels[item.w_level]?.class || ''}">${levels[item.w_level]?.text || '未知'}</td>
                                <td><button class="delete-btn" onclick="deleteWord(${item.id}, '${item.word}')">删除</button></td>
                            `;
                            tbody.append(tr);
                        });
                    } else {
                        alert(data.msg);
                    }
                });
        }

        function deleteWord(id, word) {
            if (confirm(`是否要删除${word}?`)) {
                fetch(`/cgi-bin/delsen?id=${id}`)
                    .then(resp => resp.json())
                    .then(data => {
                        alert(data.msg);
                        if (data.code == 0) {
                            loaddata(); // Refresh data
                        }
                    });
            }
        }

        function validForm(form) {
            let form_data = {
                word: form.sensitiveWord.value,
                w_level: form.level.value
            };

            fetch("/cgi-bin/sensitive", {
                method: "POST",
                body: JSON.stringify(form_data),
                headers: {
                    "content-type": "application/json;charset=utf-8"
                }
            })
            .then(resp => resp.json())
            .then(data => {
                if (data.code == 0) {
                    alert("新增成功!");
                    loaddata();
                    form.reset(); 
                }
            });
            return false; 
        }

        function nextPage() {
            currentPage++;
            loaddata();
        }

        function prevPage() {
            if (currentPage > 1) {
                currentPage--;
                loaddata();
            }
        }

        const levels = {
            1: { text: "保密", class: "level-1" },
            2: { text: "秘密", class: "level-2" },
            3: { text: "绝密", class: "level-3" }
        };
    </script>
</body>

</html>
